<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="display" uri="/WEB-INF/tags/displaytag-12.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>

<html>
<head>
	<title>Nagpur Munciple Corporation - Google Mapping</title>
	<meta name="decorator" content="Admin_HeaderFooter" />
	<meta name="tab" content="viewTrack" />	
	
	<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
	<!--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAu5uZUEWFf_PGLJL6oAB1ahSCNtSGhNoL_TN2FnCc3wIkczsEQxQd9JQdimODbNk5fsLXuxktQQylSQ" type="text/javascript"></script>-->
	<script type="text/javascript" src="./js/Popup.js"></script>
	<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBl-1kmeYgZ8kS_L9_LqfeO481d_zKW6i4&sensor=false">
    </script>
	
	<script type="text/javascript">
	
	// The locations array contains the set of text locations making up the polyline.
	var locations = [];
	// The latlngs array contains the set of LatLng objects.
	var latlngs = new google.maps.MVCArray();
	var levels = [];
	// The markers array contains the actual Marker objects.
	var markers = [];
	var displayPath;

	var selectedMarker = null;
	var map;

	// The tempMarker is a marker showing a candidate location.
	var tempMarker = new google.maps.Marker();

	var highlightIcon = new google.maps.MarkerImage(
	  "./images/mm_20_yellow.png",
	  new google.maps.Size(12,20),
	  new google.maps.Size(6,20)
	);

	var tempIcon = new google.maps.MarkerImage(
	  "./images/mm_20_green.png",
	  new google.maps.Size(12,20),
	  new google.maps.Size(6,20)
	);

	var locationIcon = new google.maps.MarkerImage(
	  "./images/mm_20_blue.png",
	  new google.maps.Size(12,20),
	  new google.maps.Size(6,20)
	);

	var newShadow = new google.maps.MarkerImage(
	  "./images/mm_20_shadow.png",
	  new google.maps.Size(22,20),
	  new google.maps.Point(13,13)
	);

	var map;
	
	var sweepingTrack = new google.maps.Polyline({
					strokeOpacity: 0.5,
					strokeWeight: 2
				});
				
	var endMarker = new google.maps.Marker({icon:"./images/mm_20_yellow.png"});
	
	var startMarker = new google.maps.Marker({icon:"./images/mm_20_blue.png"});
				
	// Create the Google Map to be used.
	function initialize() {
	
	var myOptions = {
					center: new google.maps.LatLng(21.14900241815646, 79.08094482216802),
					zoom: 12,
					mapTypeId: google.maps.MapTypeId.ROADMAP
	        };
	  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


	   
	  tempMarker.setOptions({
	    icon: tempIcon,
	    shadow: newShadow,
	    draggable: true
	  });

	  google.maps.event.addListener(map, "click", showTempMarker);

	  displayPath = new google.maps.Polyline({
		map: map,
		strokeColor: "#FF0000",
	    strokeOpacity: 1.0,
	    strokeWeight: 2,
	    path: latlngs
	  })
	  
	  document.getElementById('map_canvas').style.display = 'none'
	}

	function showTempMarker(e) {
	 
	 
	  tempMarker.setPosition(e.latLng);

	  document.getElementById('txtLatitude').value = e.latLng.lat();
	  document.getElementById('txtLongitude').value = e.latLng.lng();

	  google.maps.event.addListener(tempMarker, "drag", function() {
	    document.getElementById('txtLatitude').value = tempMarker.getPosition().lat();
	    document.getElementById('txtLongitude').value = tempMarker.getPosition().lng();
	  });

	  tempMarker.setMap(map);
	}

		function displayEmpTrack(trackPoints) {
					
					document.getElementById('map_canvas').style.display = 'none'
					map.setCenter(trackPoints[0]);
					map.setZoom(15);
				    var color = "#3b2ee8";
				
					sweepingTrack.setPath(trackPoints);
					sweepingTrack.strokeColor = color;
					sweepingTrack.startPointMarker = tempMarker;
				
				
					sweepingTrack.setMap(map);
					
					startMarker.setPosition(trackPoints[0]);
					startMarker.setMap(map);
					
					endMarker.setPosition(trackPoints[trackPoints.length-1]);
					endMarker.setMap(map)
			
		}
	
	
		function hideMap(){
			//document.getElementById('map_canvas_1').style.display = 'none'
		}

		function showMap(trackPointsString){
			displayEmpTrack(getTrackPointsArray(trackPointsString));
			Popup.show('map_canvas');
		}

		function getTrackPointsArray(trackPoints) {
				var latLongPoints = new Array()
				var points = trackPoints.split('#');
				for(var i=0; i < points.length; i++ ) {
					var latLng = points[i].split(',');
					var lat = parseFloat(latLng[0].trim());
					var lng = parseFloat(latLng[1].trim());
					latLongPoints.push(new google.maps.LatLng(lat,lng));
				}
				return latLongPoints;
			}
		
	String.prototype.trim = function () {
	    return this.replace(/^\s*/, "").replace(/\s*$/, "");
	}
	function submitFilter(){
		var supId = document.getElementById('superviserId').value;
		var swepId = document.getElementById('sweeperId').value; 
		if((supId.trim()).length==0 && (swepId.trim()).length==0 )
		{
			//enable superviserId error.
			document.getElementById("trackErrMsg").style.display = 'block';
			return false;
		}
 		else
 		{
 			document.getElementById("trackErrMsg").style.display = 'none';
 		}
		return true;
	}
	function deleteTrack(id){
	document.getElementById('id').value=id;
	document.forms["createTrack"].action="deleteTrack.action";
	document.forms["createTrack"].submit();
	}
	
	function loadWardList(ref, wardId) {
		try
		
		{
			//alert("laodWardLIst");
			var appContextPath = "<%= request.getContextPath()%>";
			jsonrpc = new JSONRpcClient(appContextPath + "/JSON-RPC");
			var zoneId = ref.options[ref.options.selectedIndex].value;  
			zoneId = ref.options[ref.options.selectedIndex].value; 
			
			if('-1' == zoneId)  {
			document.getElementById('wardId').disabled="disabled";
			}else{
			
						
			var result = jsonrpc.wards.getWardList(zoneId);
			//alert(result);
			var eWardObj = document.getElementById(wardId);
			var eventLength = eWardObj.options.length;
			
			for(i=eWardObj.options.length -1;i>=0 ;i--)
			{
					eWardObj.options[i] = null;
			}
			eWardObj.options[0] = new Option('Select Ward','-1');
			
			if( result !=null && result.list.length > 0)
			{

				for(i=0,j=1;i < result.list.length;i++)
				{
					var id = result.list[i].fieldName;
					var value = result.list[i].fieldValue;
					eWardObj.options[j++] = new Option(value,id);
				}
			}
			}
		}
		catch(e) {
		alert(e);
		}
		zoneId = ref.options[ref.options.selectedIndex].value; 
		if('-1' == zoneId)  {
		   document.getElementById('wardId').disabled="disabled";
	   	}else{
	   	 document.getElementById('wardId').disabled=false;
	   	}
		
		}
	</script>

</head>

  <body onload="initialize()" onunload="GUnload()">

<div id="mainCnt">
	<div>

<div id="container" >
<b></b>
<div>
<h2> View Tracks </h2>
</div>
</br>
<div id="map_canvas"  style="width: 400px; height: 400px"></div>

<s:form id="createTrack" action="filterTracks.action" >

<div id="trackErrMsg" class="errorMsg">Please enter Superviser Id or Sweeper Id.</div>
 <table id="ctl00_cph1_tblTest"  cellspacing="1" cellpadding="1">

<tr>
<td><span class="mandetory">*</span><b>Select Zone&nbsp;&nbsp; &nbsp;:</b><s:select id="zoneId" name="track.zoneId" cssClass="dropdown" 
	                            value="%{track.zoneId}" headerKey="-1" headerValue="Select Zone" 
				 			 onchange="javascript:loadWardList(this,'wardId');" 
				  			list="zoneList" listKey="id" listValue="name" onselect="true"/></td>
							<td><b>Select Prabhag :</b><s:select  required="true" 
						name="track.wardId" id="wardId" cssClass="dropdown"
							list="wardList" listKey="id" listValue="name"
							headerKey="-1" headerValue="Select Prabhag"
							value="%{track.wardId}"  /></td>
</tr>
<tr>
<td>
<b>&nbsp;&nbsp;Superviser Id :</b><s:textfield id="superviserId" name="track.superviserId" value="%{track.superviserId}" size="6"/>

<!-- <input id="superviserId" name="track.superviserId" maxlength="11" type="text" class="inputField"/> -->
</td>

<td>
<b>Sweeper Id&nbsp;:</b> 
<s:textfield id="sweeperId" name="track.sweeperId" value="%{track.sweeperId}" size="6"/>
<!-- <input id="sweeperId" name="track.sweeperId" maxlength="11" type="text" class="inputField"/> -->
<s:hidden id="id" name="track.id"/>
</td>
</tr>
<tr>

<td colspan="2" align="center"><input type="submit" value="Search"  id="button_css" />
</td>
</tr>
</table>


<div style="padding-top: 8px;">
<s:set name="tracks" value="trackList" scope="request" />
<display:table name="tracks" id="row" class="dataTable" defaultsort="1" pagesize="15"
	defaultorder="ascending"  cellspacing="0" requestURI="filterTracks.action"
	decorator="org.displaytag.decorator.TotalTableDecorator"
	
	>
	

    <display:column property="zoneId" maxLength="15"/>
    <display:column property="wardId" maxLength="15"/>
	<display:column property="superviserId" maxLength="15"/>
	<display:column property="superviserName" maxLength="15"/>
	<display:column property="sweeperId" maxLength="15"/>
	<display:column property="sweeperName" maxLength="15"/>
	<display:column property="trackType" maxLength="15"/>
	<display:column  maxLength="40">
	<a href="#" onclick="showMap('<c:out value="${row.latLong}"/>');return false;">Show Track</a>
	</display:column>
	<display:column  maxLength="40">
	<a href="createTrack.action?id=<c:out value="${row.id}"/>">Edit</a>
	</display:column>
	<display:column  maxLength="40">
	<a href="javascript:deleteTrack('<c:out value="${row.id}"/>')">Delete</a>
	</display:column>
	
</display:table>
</s:form>
</div>
</div>
</div></div>
</body>
</html>
